<template>
  <div class="kjk">
    <div class="header">
      <div class="">
        <img
          src="@/assets/left-s-line.png"
          class="left-s-line"
          @click="handleAvatarClick"
        />
        邀请好友
      </div>
      <div class="fxItem" @click="handleClick">
        <img src="@/assets/170.png" class="img28" />
        点击分享链接给好友
      </div>
    </div>
    <div class="mfl">我的好友列表</div>
    <div class="list">
      <a-flex
        justify="space-between"
        class="listItem"
        v-for="(item, index) in hdskf"
        :key="index"
      >
        <img :src="item.memberPicture" class="rightLine" />
        <a-typography-text class="nickname-value">{{
          item.memberName
        }}</a-typography-text>
        <a-typography-text class="avatartime">{{
          item.createTime
        }}</a-typography-text>
      </a-flex>
      <div class="fxdj" v-if="fxdjShow" @click="fxdjShow = false">
        <img src="@/assets/fxdj.png" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { isWeChatBrowser, copyToClipboard } from '@/utils/util'
import { init } from '@/utils/wxShare'
import logo from '@/assets/logo.png'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import md5 from 'md5'
import wx from 'weixin-js-sdk'
import { payGetToken, payGetTicket, systemMemberList } from '@/api/api'
const router = useRouter()
const hdskf = ref([])
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const fxdjShow = ref(false)
const shareInfo = {
  title: '桐桦健康', // 分享标题
  desc: '', // 分享描述
  link: `https://h5.tonghuajiankang.com/friends?id=${userInfo.id}`, //卡片链接
  imgUrl: logo, // 卡片缩略图
}
onBeforeMount(async () => {
  const res = await systemMemberList({ inviteBy: userInfo.id })
  if (res.code == 200) {
    hdskf.value = res.rows
  }
})
const handleAvatarClick = () => {
  router.push({ path: '/my' })
}
const handleClick = () => {
  if (isWeChatBrowser()) {
    payGetToken().then((res) => {
      payGetTicket({ accessToken: res }).then((res) => {
        fxdjShow.value = true
        if (res.code == 200) {
          wx.config({
            appId: 'wx454b020f20003032',
            timestamp: res.data.timestamp, // 当前时间戳（10位整数）
            nonceStr: res.data.noncestr, // 随机字符串（16~32位字母+数字）
            signature: res.data.signature, // SHA1签名（40位十六进制）
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'],
          })

          wx.ready(() => {
            // 分享给朋友
            wx.updateAppMessageShareData({
              title: shareInfo.title,
              desc: shareInfo.desc,
              link: shareInfo.link,
              imgUrl: shareInfo.imgUrl,
              success: () => {
                Toast.success('分享好友配置成功')
              },
            })
          })

          wx.error((res) => {
            Toast.fail('微信分享配置失败:', res)
          })
        }
      })
    })
  } else {
    copyToClipboard(location.href, false)
    Toast.success('复制成功，快去分享吧')
  }
}
</script>
<style scoped lang='less'>
.kjk {
  width: 100%;
  height: 100vh;
  background: #fcfaf4;

  .header {
    text-align: center;
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid #ccc;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    text-align: center;
    font-style: normal;
    height: 172px;
    width: 100%;
    background: url('@/assets/9.png') no-repeat;
    background-size: 100% 100%;

    .left-s-line {
      width: 20px;
      position: absolute;
      left: 16px;
      top: 16px;
    }
  }

  .fxItem {
    width: 100%;
    height: 50px;
    background: #fff2e3;
    border-radius: 8px;
    border: 1px solid #6d4615;
    margin-top: 55px;
    padding: 14px;

    .fx {
      width: 30px;
      margin-right: 10px;
    }
  }

  .list {
    width: 100%;
    height: calc(100vh - 220px);
    overflow-y: auto;

    .listItem {
      padding: 17px;
      border-bottom: 1px solid #ccc;

      .rightLine {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        margin-right: 10px;
      }

       .avatartime {
        width: 50%;
        height: 22px;
      }

      .nickname-value {
        width: 40%;
        height: 22px;
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 显示省略号 */
        display: -webkit-box;
        /* 使用webkit的box布局 */
        -webkit-line-clamp: 1;
        /* 限制显示行数 */
        -webkit-box-orient: vertical;
        /* 垂直方向排列 */
        word-break: break-all;
        margin-right: 1%;
      }
    }
  }
}

.fxdj {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  background-color: rgb(18 18 18 / 79%);

  img {
    width: 100%;
  }
}

.mfl {
  width: 150px;
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  text-align: left;
  font-style: normal;
  margin: 24px 0 0 16px;
}
</style>